<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: html}">
<head>
    <title>账号设置 - 诗词平台</title>
</head>
<body>
<div th:fragment="content">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title mb-4">账号设置</h3>

                    <!-- 基本信息表单 -->
                    <form th:action="@{/api/users/profile}" method="post"
                          class="mb-5" id="profileForm">
                        <h5 class="mb-3">基本信息</h5>
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username"
                                   name="username" th:value="${user.username}" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email"
                                   name="email" th:value="${user.email}" required>
                        </div>
                        <div class="mb-3">
                            <label for="bio" class="form-label">个人简介</label>
                            <textarea class="form-control" id="bio" name="bio"
                                      rows="3" th:text="${user.bio}"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </form>

                    <!-- 修改密码表单 -->
                    <form th:action="@{/api/users/password}" method="post"
                          id="passwordForm">
                        <h5 class="mb-3">修改密码</h5>
                        <div class="mb-3">
                            <label for="currentPassword" class="form-label">当前密码</label>
                            <input type="password" class="form-control"
                                   id="currentPassword" name="currentPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control"
                                   id="newPassword" name="newPassword"
                                   minlength="6" required>
                            <div class="form-text">密码长度至少6个字符</div>
                        </div>
                        <div class="mb-3">
                            <label for="confirmPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control"
                                   id="confirmPassword" required>
                        </div>
                        <button type="submit" class="btn btn-primary">修改密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    // 处理基本信息表单提交
    document.getElementById('profileForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const data = {
            username: formData.get('username'),
            email: formData.get('email'),
            bio: formData.get('bio')
        };

        fetch('/api/users/profile', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (response.ok) {
                    alert('保存成功');
                    location.reload();
                }
            });
    });

    // 处理修改密码表单提交
    document.getElementById('passwordForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        if (newPassword !== confirmPassword) {
            alert('两次输入的新密码不一致');
            return;
        }

        const formData = new FormData(this);
        const data = {
            currentPassword: formData.get('currentPassword'),
            newPassword: formData.get('newPassword')
        };

        fetch('/api/users/password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (response.ok) {
                    alert('密码修改成功，请重新登录');
                    window.location.href = '/login';
                }
            });
    });
</script>
</body>
</html> 